<template>
  <div>
    <el-button type="primary" size="small" @click="addDialogVisible = true">添加</el-button>
    <el-table :data="usersList">
      <el-table-column label="用户名" prop="username" width="100"></el-table-column>
      <el-table-column label="姓名" prop="name" width="80"></el-table-column>
      <el-table-column label="头像" width="80">
        <template v-slot="{ row }">
          <img v-if="row.avatar" width="40px"
            :src="`http://127.0.0.1:8090/api/files/_pb_users_auth_/${row.id}/${row.avatar}`" />
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" width="80">
        <template v-slot="{ row }">
          <span v-if="row.expand">{{ row.expand.department.label }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="60">
        <template v-slot="{ row }">
          {{ { 1: '男', 2: '女' }[row.gender] }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age" width="60"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="手机" prop="phone"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleteUser(row.id)">删除</el-button>
          <el-button type="info" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination background layout="prev, pager, next" :total="totalItems" :page-size="perPage"
        v-model:current-page="currentPage" />
    </div>

    <el-dialog title="添加" v-model="addDialogVisible">
      <UsersAdd @success-save="getUsersList(); addDialogVisible = false"
        @cancel-save="addDialogVisible = false"></UsersAdd>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, } from 'vue'
import { ElMessageBox } from 'element-plus'
import { getUsersListApi, deleteUserByIdApi } from '@/api/users'

const addDialogVisible = ref(false)

const usersList = ref([])
const totalItems = ref(1)
const perPage = ref(3)
const currentPage = ref(1)


async function getUsersList() {
  const resultList = await getUsersListApi({ page: currentPage.value, perPage: perPage.value })
  usersList.value = resultList.items
  totalItems.value = resultList.totalItems
}

getUsersList()
watch(currentPage, () => getUsersList())
// watchPostEffect(() => getUsersList());

async function deleteUser(id) {

  // ElMessageBox.confirm('确定删除吗？', '删除', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning',
  // }).then(async () => {
  //   await deleteUserByIdApi(id)
  //   getUsersList();
  // });
  try {
    await ElMessageBox.confirm('确定删除吗？', '删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteUserByIdApi(id);
    getUsersList();
  } catch (error) {
    //...
  }
}
</script>
